<template>
	<div
		ref="rootRef"
		:tabindex="disable?-1:0"
		:class="classes()"
		:style="{
			fontSize:toCssLength(size),
			color,
		}"
		@click.stop="clickFn"
	>
		<slot
			name="icon"
			v-bind="slotScope()"
		>
			<div
				class="lexmis_box"
			>
				<Icon
					v-if="vm.$baseui_theme === 'fk'"
					:name="activeStatus() === true?'check':'remove'"
				/>
				<svg
					v-else
					focusable="false"
					viewBox="0 0 24 24"
					aria-hidden="true"
					class="lexmis-Icon"
				>
					<path
						d="M1.73,12.91 8.1,19.28 22.79,4.59"
						fill="none"
						class="lexmis_true"
					/>
					<path
						d="M4,14H20V10H4"
						class="lexmis_undefined"
					/>
				</svg>
			</div>
		</slot>
		<div
			v-if="label||$scopedSlots.default"
			class="lexmis_label"
		>
			<slot v-bind="slotScope()">{{label}}</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	getCurrentInstance,
} from 'vue';
import {
	toCssLength,
} from '../../../util/common/index';
import useStateToggle from '../../../composables/useStateToggle';
import Icon from '../icon';
/**
 * 多选框组件
 * @author 唐国雄
 * @date 2022/11/18
 * 属性----------------------
 * v-model				当前值
 * :active				手动控制是否勾选
 * :before-change		切换前置处理器
 * :val					唯一键(组合使用时)
 * :label				标签名
 * :true-value			勾选时的值(单独使用时)
 * :false-value			未勾选时的值(单独使用时)
 * :indeterminate-value		半勾选时的值(单独使用时)
 * :toggle-indeterminate	能否切换到半勾选状态(单独使用时)
 * :toggle-order			切换顺序(单独使用时)
 * :color				颜色
 * :size				大小
 * :disable			禁用状态
 * 事件----------------------
 * @input			值变化
 * @active			勾选(组合使用时)
 * @inactive		取消勾选(组合使用时)
 * 插槽----------------------
 * #default			自定义标签
 * #icon			自定义图案
 */
const emit = defineEmits<{
	(e:'input',val:any):void;
	(e:'active',val:any):void;
	(e:'inactive',val:any):void;
}>();
const props = withDefaults(defineProps<{
	value?:any;
	active?:boolean | 'indeterminate' | null;
	beforeChange?:(data:any) => void | boolean | Promise<void | boolean>;
	val?:any;
	label?:string;
	trueValue?:any;
	falseValue?:any;
	indeterminateValue?:any;
	toggleIndeterminate?:boolean;
	toggleOrder?:'tf' | 'ft';
	color?:string;
	size?:string | number;
	disable?:boolean;
}>(),{
	active:null,
	trueValue:true,
	falseValue:false,
	indeterminateValue:null,
	toggleOrder:'tf',
});

const vm = getCurrentInstance()!.proxy;
//region 状态切换
const {
	activeStatus,
	clickFn,
	rootRef,
} = useStateToggle({
	key(){
		return props.val;
	},
	value(){
		return props.value;
	},
	active(){
		return props.active;
	},
	disabled(){
		return props.disable;
	},
	aloneActive(val:any){
		if(props.trueValue === val){
			return true;
		}else if(props.falseValue === val){
			return false;
		}
		return 'indeterminate';
	},
	beforeChange:props.beforeChange,
	aloneValue(active:any){
		const {toggleOrder} = props;
		if(active === true){
			if(toggleOrder === 'tf' || !props.toggleIndeterminate){
				return props.falseValue;
			}
		}else if(active === false){
			if(toggleOrder === 'ft' || !props.toggleIndeterminate){
				return props.trueValue;
			}
		}else{
			return toggleOrder === 'tf'
				? props.trueValue
				: props.falseValue;
		}
		return props.indeterminateValue;
	},
	emit,
});
//endregion
//region 类名
const classes = () => {
	const isActive = activeStatus();
	return 'lexmis-Checkbox' +
		(isActive === true ? ' lexmis--true' : isActive === false ? ' lexmis--false' : ' lexmis--undefined') +
		(props.disable ? ' lexmis--disable' : ' lexmis--hoverable');
};
//endregion
//region 插槽作用域
const slotScope = () => {
	return {
		active:activeStatus,
		disabled:props.disable,
	};
};
//endregion
</script>

<script lang="ts">
export default {};
</script>